<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>自定义- HTML 绘制</title>
</head>
<body>
<div id="mountNode"></div>
<script src="../build/g6.js"></script>
<script src="../build/plugins.js"></script>
<script>
  const data = {
    nodes: [{
      id: 'node1',
      x: 100,
      y: 200
    }, {
      id: 'node2',
      x: 300,
      y: 200
    }, {
      id: 'node3',
      x: 300,
      y: 300,
      shape: 'common'
    }],
    edges: [{
      target: 'node2',
      source: 'node1'
    }]
  };

  G6.registerNode('customNode', {
    draw(item){
      const group = item.getGraphicGroup();
      const html = G6.Util.createDOM('<div>这里是 HTML 节点</div>');
      return group.addShape('dom', {
        attrs: {
          x: 0,
          y: 0,
          width: 100,
          height: 100,
          html
        }
      });
    }
  });

  const graph = new G6.Graph({
    container: 'mountNode',  // 容器ID
    fitView: 'cc',
    renderer: 'svg',
    modes: {
      default: ['panCanvas', 'wheelZoom']
    },
    height: window.innerHeight
  });
  graph.node({
    shape: 'customNode'
  });
  graph.read(data);
</script>
</body>
</html>
